import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { AppDispatch, RootState } from '@/store'
import { Select } from 'antd'
import { getChannelsAction } from '@/store/actions/article'
const { Option } = Select
type Value = number | undefined
interface Props {
  value?: Value
  onChange?: ((value: Value) => void) | undefined
  width?: number
}
function Channel({ value, onChange, width = 289 }: Props) {
  const { channelList } = useSelector((state: RootState) => state.article)
  const dispatch = useDispatch<AppDispatch>()
  useEffect(() => {
    dispatch(getChannelsAction())
  }, [dispatch])
  return (
    <Select
      value={value}
      onChange={onChange}
      placeholder="请选择文章频道"
      // defaultValue="lucy"
      style={{ width }}>
      {channelList.map((item) => (
        <Option value={item.id} key={item.id}>
          {item.name}
        </Option>
      ))}
      <Option value="lucy">Lucy</Option>
    </Select>
  )
}

export default Channel
